import React, { Component } from 'react'
import { View, ScrollView, Text } from 'react-native'
import commonStyle from '../../../../libs/commonStyle'
import Iconfont from '../../../../components/iconfont'
import TableHead from '../../../../components/tableHead/index'
import { recruitFCTableHeadList } from '../data'
import API from '../../../../api/request'
import {deviceHeightDp} from '../../../../libs/pxToDp'

export default class TabRecruitFCIncome extends Component {
  constructor (props) {
    super(props)
    this.state = {
      statList: [
        {
          title: '总分成收入',
          type: 'totalSubDivideIncome',
          amount: '0.00'
        },
        {
          title: '今日分成收入',
          type: 'todaySubDivideIncome',
          amount: '0.00'
        }
      ],

      list: [],
      subDividePercent: '',

      tableHeadList: recruitFCTableHeadList
    }
  }
  componentDidMount () {
    this.apiData()
  }
  async apiData () {
    let url = '/api/user/subDivide/'
    let res = await API.post(url)
    let data = res.data
    let { statList } = this.state
    if (res && res.code === '200') {
      statList.map((item, index) => {
        if (data[item.type]) {
          statList[index].amount = data[item.type]
        }
      })
      this.setState({
        subDividePercent: data.subDividePercent,
        statList,
        list: (data && data.forwardSubDivideList) || []
      })
    }
  }
  render () {
    const { statList, tableHeadList, subDividePercent, list } = this.state
    return (
      <ScrollView style={{height: deviceHeightDp*0.51}}>
        <View style={[commonStyle.flexCenter, commonStyle.p20, commonStyle.pt30]}>
          <Text style={[commonStyle.f26, commonStyle.mb30]}>
            您将获得徒弟转发收入的{subDividePercent}%
          </Text>
          <View style={[commonStyle.flexRow, commonStyle.border]}>
            {statList.map((item, index) => {
              return (
                <View
                  key={item.type}
                  style={[
                    commonStyle.p30,
                    commonStyle.flexItem,
                    commonStyle.flexCenter,
                    index === 0 ? commonStyle.borderRight : ''
                  ]}
                >
                  <Text style={[commonStyle.f26, { color: '#444' }]}>
                    {item.title}
                  </Text>
                  <View
                    style={[
                      commonStyle.flexRow,
                      commonStyle.mt20,
                      commonStyle.flexVerticalCenter
                    ]}
                  >
                    <Iconfont name='money4' size={10} color='#666' />
                    <Text
                      style={[
                        commonStyle.f36,
                        commonStyle.fontBold,
                        commonStyle.ml10
                      ]}
                    >
                      {item.amount}
                    </Text>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
        <View style={[commonStyle.p20]}>
          <Text style={commonStyle.mb20}>最近100条徒弟分成收入</Text>
          <TableHead list={tableHeadList} />
          {list.map((item, index) => {
            return (
              <View
                style={[
                  commonStyle.flexRow,
                  commonStyle.p20,
                  commonStyle.flexVerticalCenter,
                  commonStyle.borderBottom
                ]}
              >
							<View style={[commonStyle.flexCenter, { flex: tableHeadList[0].flex }]}>
									<Text style={[commonStyle.f22]}>
									  {item.userId}/{item.nickname}
									</Text>
							</View>
							<View style={[commonStyle.flexCenter, { flex: tableHeadList[1].flex }]}>
									<Text numberOfLines={2} style={[commonStyle.f22]}>
									  {item.title}
									</Text>
							</View>
							<View style={[commonStyle.flexCenter, { flex: tableHeadList[2].flex }]}>
									<Text style={[commonStyle.f22]}>
									  {item.income}
									</Text>
							</View>
              </View>
            )
          })}
        </View>
      </ScrollView>
    )
  }
}
